<template>
  <div>
    <el-col :span="6" class="el-col-box">
        <div class="grid-content bg-purple">
            <el-card class="box-card card-item">
                <div class="text item">
                    <p>
                        <el-progress type="circle" :percentage="progressBar" :width="80" :color="colors"></el-progress>
                    </p>
                    <p class="title">{{title}}</p>
                </div>
                <div class="text item">
                    <p class="number-card">{{number}}</p>
                    <p class="tip-title">{{tipName}}</p>
                </div>
            </el-card>
        </div>
    </el-col>
  </div>
</template>

<script>
export default {
    name: 'cartList',
    props: {
        progressBar: {
            type: Number,
            defalut: 0
        },
        title: {
            type: String,
            defalut: '***'
        },
        number: {
            type: [Number, String],
            defalut: 0
        },
        tipName: {
            type: String,
            defalut: '***'
        },
        colors: {
            type: String,
            defalut: '#FF5274'
        }
    },
    data () {
        return {

        }
    },
    methods: {
        
    }
}
</script>

<style lang="scss" scoped>
    .el-col-box {
        margin-bottom: 20px;
    }
    .card-item {
        /deep/ .el-card__body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
        }
        p {
            margin: 0;
            &.title {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
            }
            &.number-card {
                font-size: 30px;
                text-align: right;
            }
            &.tip-title {
                font-size: 14px;
                color: #666;
                text-align: right;
                margin-top: 4px;
            }
        }
    }
</style>